<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
	</head>
	<body>
		
		<h1>1-标签</h1>
		<p>标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签</p>
		<h2>1.1-普通标签</h2>
		<h1>Example Heading <span class="label label-default">Label</span></h1>
		<h2>Example Heading <span class="label label-default">Label</span></h2>
		<h3>Example Heading <span class="label label-default">Label</span></h3>
		<h4>Example Heading <span class="label label-default">Label</span></h4>

		<h2>1.2-其他样式标签</h2>
		<p>您可以使用修饰的 class label-default、label-primary、label-success、
		label-info、label-warning、label-danger 来改变标签的外观</p>
		
		<span class="label label-default">默认标签</span>
		<span class="label label-primary">主要标签</span>
		<span class="label label-success">成功标签</span>
		<span class="label label-info">信息标签</span>
		<span class="label label-warning">警告标签</span>
		<span class="label label-danger">危险标签</span>

		
		<h1>2-徽章(Badges)</h1>
		<p>徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，
			只需要把 &lt;span class="badge"&gt; 添加到链接、Bootstrap 导航等这些元素上即可。</p>
		<a href="#">Mailbox <span class="badge">50</span></a>

		<h4>胶囊式导航中的激活状态</h4>
		<ul class="nav nav-pills">
		   <li class="active"><a href="#">首页 <span class="badge">42</span></a></li>
		   <li><a href="#">简介</a></li>
		   <li><a href="#">消息 <span class="badge">3</span></a></li>
		</ul>
		<br>
		
		<h4>列表导航中的激活状态</h4>
		<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
		   <li class="active"><a href="#"><span class="badge pull-right">42</span>首页</a>
		   </li>
		   <li><a href="#">简介</a></li>
		   <li><a href="#"><span class="badge pull-right">3</span>消息</a>
		   </li>
		</ul>

		
		<h1>3-超大屏幕</h1>
		<pre>
			本章将讲解 Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：
			•创建一个带有 class .jumbotron. 的容器 &lt;div&gt;。
			•除了更大的 &lt;h1&gt;，字体粗细 font-weight 被减为 200px。
		</pre>
		
		<div class="container">
			<div class="jumbotron">
				<h1>欢迎登陆页面！</h1>
				<p>这是一个超大屏幕（Jumbotron）的实例。</p>
				<p><a class="btn btn-primary btn-lg" role="button">学习更多</a></p>
			</div>
		</div>
		
		<pre>
			为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class
		</pre>
		
		<div class="jumbotron">
		    <div class="container">
		        <h1>欢迎登陆页面！</h1>
		        <p>这是一个超大屏幕（Jumbotron）的实例。</p>
		        <p><a class="btn btn-primary btn-lg" role="button">学习更多</a></p>
		    </div>
		</div>

		<h1>3-页面标题</h1>
		<div class="page-header">
		   <h1>页面标题实例
		      <small>子标题</small>
		   </h1>
		</div>
		<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>

		<h1>4-Bootstrap 缩略图</h1>
		<pre>
		本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：
		•在图像周围添加带有 class .thumbnail 的 &lt;a&gt; 标签。
		•这会添加四个像素的内边距（padding）和一个灰色的边框。
		•当鼠标悬停在图像上时，会动画显示出图像的轮廓。			
		</pre>
		<div class="row">
		   <div class="col-sm-6 col-md-3">
		      <a href="#" class="thumbnail"><img src="../img/HBuilder.png"alt="通用的占位符缩略图"></a>
		   </div>
		   <div class="col-sm-6 col-md-3">
		      <a href="#" class="thumbnail"><img src="../img/HBuilder.png"alt="通用的占位符缩略图"></a>
		   </div>
		   <div class="col-sm-6 col-md-3">
		      <a href="#" class="thumbnail"><img src="../img/HBuilder.png"alt="通用的占位符缩略图"></a>
		   </div>
		   <div class="col-sm-6 col-md-3">
		      <a href="#" class="thumbnail"><img src="../img/HBuilder.png"alt="通用的占位符缩略图"></a>
		   </div>
		</div>
		
		
		<h2>4.2-添加自定义的内容</h2>
		<pre>
		现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
		•把带有 class .thumbnail 的 &lt;a&gt; 标签改为 &lt;div&gt;。
		•在该 &lt;div&gt; 内，您可以添加任何您想要添加的东西。由于这是一个 &lt;div&gt;，我们可以使用默认的基于 span 的命名规则来调整大小。
		•如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
		</pre>

		<div class="row">
		   <div class="col-sm-6 col-md-3">
		      <div class="thumbnail"><img src="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符缩略图"></div>
		      <div class="caption">
		         <h3>缩略图标签</h3>
		         <p>一些示例文本。一些示例文本。</p>
		         <p>
		            <a href="#" class="btn btn-primary" role="button">按钮</a> 
		            <a href="#" class="btn btn-default" role="button">按钮</a>
		         </p>
		      </div>
		   </div><!-- class="col-sm-6 col-md-3" -->
		   
		   <div class="col-sm-6 col-md-3">
		      <div class="thumbnail"><img src="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符缩略图"></div>
		      <div class="caption">
		         <h3>缩略图标签</h3>
		         <p>一些示例文本。一些示例文本。</p>
		         <p>
		            <a href="#" class="btn btn-primary" role="button">按钮</a> 
		            <a href="#" class="btn btn-default" role="button">按钮</a>
		         </p>
		      </div>
		   </div><!-- class="col-sm-6 col-md-3" -->
		   
		      <div class="col-sm-6 col-md-3">
		      <div class="thumbnail"><img src="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符缩略图"></div>
		      <div class="caption">
		         <h3>缩略图标签</h3>
		         <p>一些示例文本。一些示例文本。</p>
		         <p>
		            <a href="#" class="btn btn-primary" role="button">按钮</a> 
		            <a href="#" class="btn btn-default" role="button">按钮</a>
		         </p>
		      </div>
		   </div><!-- class="col-sm-6 col-md-3" -->
		   
		      <div class="col-sm-6 col-md-3">
		      <div class="thumbnail"><img src="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符缩略图"></div>
		      <div class="caption">
		         <h3>缩略图标签</h3>
		         <p>一些示例文本。一些示例文本。</p>
		         <p>
		            <a href="#" class="btn btn-primary" role="button">按钮</a> 
		            <a href="#" class="btn btn-default" role="button">按钮</a>
		         </p>
		      </div>
		   </div><!-- class="col-sm-6 col-md-3" -->
		</div><!-- class="row" -- >



		
		
	</body>
</html>
